<!--
 * @description  :
 * @descriptionDetail:
 * @copyright    : 许可统计查询 - 福建特例
 * @author       : mhb
 * @create       : 2023-01-17 11:06:06
-->
<template>
	<view class="page">
		<!-- #ifdef H5-ONLY -->
		<theme-navbar :is-white="false" :title="navTitle" :custom-back="goBack" style="z-index: 99999">
			<view class="nav-right-icon">
				<u-icon name="reload" color="#FFF" @tap="refreshTb()"></u-icon>
				<u-icon style="margin-left: 20rpx;" name="more-dot-fill" color="#FFF" @tap="showSearch = true"></u-icon>
			</view>
		</theme-navbar>
		<!-- #endif -->
		<!-- #ifdef H5-DINGDING || H5-WECHAT || H5-EMP -->
		<fab-button :content="fContent" @fabtrigger="fabtrigger" />
		<!-- #endif -->
		<view class="content u-page">
			<swiper-stats-com totalTitle="合计" :needCalcTotal="false" :totalEndOrStart="false" :keyCode="keyCode" :itemKeyUuid="itemKeyUuid" :orginalData="orginalData" :height="swiperHeight" areaKey="orgShortName" @dbClick="dbClick" @clickItem="clickItem"></swiper-stats-com>
			<u-tabbar :height="100" icon-size="40" bg-color="#F7F7F9" activeColor="rgb(0 112 210)" v-model="tabCurrent" :list="tabList" @change="tabChange"></u-tabbar>
		</view>
		<u-popup mode="right" length="80%" v-model="showSearch" :mask-close-able="maskCanClose">
			<lic-search-com ref="lscRef" :regs="regs" :curDate="endDate" @choiceTime="timeChoice" @search="searchTap"></lic-search-com>
		</u-popup>
		<u-calendar v-model="showTime" mode="date" @change="timeChange"></u-calendar>
	</view>
</template>
<script>
	import SwiperStatsCom from "./components/swiper-stats-com.vue";
	import LicSearchCom from "./components/licSearchCom.vue";
	import reportService from "@/service/report/report.service.js";
	import commonService from "@/service/common/common.service.js";
	import fabButton from '@/components/uni-fab.vue';
	export default {
		components: {
			SwiperStatsCom,
			LicSearchCom,
			fabButton
		},
		data() {
			return {
				user: this.$store.state.userInfo,
				keyCode: "orgUuid",
				itemKeyUuid: "",
				itemKeyName: "",
				showSearch: false,
				showTime: false,
				maskCanClose: true,
				tabCurrent: 0,
				endDate: this.$u.timeFormat(Date.now(), "yyyy-mm-dd"),
				tabList: [{
						iconPath: "../../../static/query/icon_qy2.png",
						selectedIconPath: "../../../static/query/icon_qy.png",
						text: "区域",
						header: [
							[{
									label: "",
									fieldKey: "orgShortName",
									columnSpan: 3,
									hasSort: false,
									unit: "户",
									align: "center",
								},
								{
									label: "持证数",
									fieldKey: "holderCnt",
									columnSpan: 3,
									hasSort: true,
									align: "right",
								},
								{
									label: "同期",
									fieldKey: "periodCnt",
									columnSpan: 3,
									hasSort: true,
									align: "right",
								},
								{
									label: "同比",
									fieldKey: "compareRate",
									columnSpan: 3,
									hasSort: true,
									align: "right",
								},
							],
							[{
									label: "",
									fieldKey: "orgShortName",
									columnSpan: 3,
									hasSort: false,
									unit: "户",
									align: "center",
								},
								{
									label: "持证数",
									fieldKey: "holderCnt",
									columnSpan: 2,
									hasSort: true,
									align: "right",
								},
								{
									label: "上年末",
									fieldKey: "lastYearCnt",
									columnSpan: 2,
									hasSort: true,
									align: "right",
								},
								{
									label: "差值",
									fieldKey: "diffCnt",
									columnSpan: 2,
									hasSort: true,
									align: "right",
								},
								{
									label: "差值增幅",
									fieldKey: "diffGrowRate",
									columnSpan: 3,
									hasSort: true,
									align: "right",
								},
							],
						],
					},
					{
						iconPath: "../../../static/query/icon_jyyt2.png",
						selectedIconPath: "../../../static/query/icon_jyyt.png",
						text: "经营业态",
						header: [
							[{
									label: "",
									fieldKey: "bizFormatName",
									columnSpan: 3,
									hasSort: false,
									unit: "户",
									align: "center",
								},
								{
									label: "持证数",
									fieldKey: "holderCnt",
									columnSpan: 3,
									hasSort: true,
									align: "right",
								},
								{
									label: "同期",
									fieldKey: "periodCnt",
									columnSpan: 3,
									hasSort: true,
									align: "right",
								},
								{
									label: "同比",
									fieldKey: "compareRate",
									columnSpan: 3,
									hasSort: true,
									align: "right",
								},
							],
							[{
									label: "",
									fieldKey: "bizFormatName",
									columnSpan: 3,
									hasSort: false,
									unit: "户",
									align: "center",
								},
								{
									label: "持证数",
									fieldKey: "holderCnt",
									columnSpan: 2,
									hasSort: true,
									align: "right",
								},
								{
									label: "上年末",
									fieldKey: "lastYearCnt",
									columnSpan: 2,
									hasSort: true,
									align: "right",
								},
								{
									label: "差值",
									fieldKey: "diffCnt",
									columnSpan: 2,
									hasSort: true,
									align: "right",
								},
								{
									label: "差值增幅",
									fieldKey: "diffGrowRate",
									columnSpan: 3,
									hasSort: true,
									align: "right",
								},
							],
						],
					},
				],
				swiperHeight: 0,
				orginalData: {
					header: [],
					content: [],
				},
				orgParam: { // org层级相关参数
					orgUuid: "",
					parentOrgUuid: "",
					orgName: "",
					parentOrgName: "",
				},
				regs: "",
				fContent: [{
						iconPath: require("@/static/refresh.png"),
						selectedIconPath: require("@/static/refresh.png"),
						text: '刷新',
						active: false,
					},
					{
						iconPath: require("@/static/omore.png"),
						selectedIconPath: require("@/static/omore.png"),
						text: '更多',
						active: false,
					},
				],
			}
		},
		onLoad(opt) {},
		watch: {
			showTime(v) {
				// 调用钉钉标题接口，动态设置展示标题
				this.maskCanClose = !v;
			},
		},
		mounted() {
			// this.setRightBtns();
			this.init();
		},
		methods: {
			init() {
				// #ifdef H5-DINGDING
				this.swiperHeight = this.$u.sys().windowHeight - 50;
				// #endif
				// #ifndef H5-DINGDING
				this.swiperHeight = this.$u.sys().windowHeight - 44 - 50;
				// #endif
				commonService.queryAreaBaseByCode(this.user.user.org.orgUuid).then(res => {
					if (!res.success) return;
					let areaName = "";
					let areaCode = "";
					if (this.user.orgLevel == 1) { // 省级
						areaName = res.bean.proname;
						areaCode = res.bean.procode;
					} else if (this.user.orgLevel == 2) { // 市级
						areaName = res.bean.admdivname;
						areaCode = res.bean.admdivcode;
					} else { // 区县
						areaName = res.bean.countryname;
						areaCode = res.bean.countrycode;
					}
					this.orgParam.orgName = areaName;
					this.orgParam.areaName = areaName;
					this.orgParam.areaCode = areaCode;
					this.regs = this.orgParam.orgName;
				});
				this.orgParam.parentOrgUuid = "";
				this.orgParam.orgUuid = this.user.user.org.orgUuid; // this.user.user.org.parentOrgUuid;
				// this.orgParam.orgUuid = '8a83899056355fd20156355fd25d0017'; // this.user.user.org.parentOrgUuid;
				this.orginalData.header = this.tabList[this.tabCurrent].header;
				this.loadData();
			},
			setRightBtns() {
				// 设置右侧标题
				// #ifdef H5-DINGDING
				this.$deviceApi.setMenu([{
					"id": "1",
					"text": "刷新",
				}, {
					"id": "2",
					"text": "更多",
				}, ], (res) => {
					if (res.id == '1') {
						this.refreshTb();
					} else {
						// 弹出more
						this.showSearch = true;
					}
				});
				// #endif
			},
			loadData() {
				this.$modal.showLoading("查询中...");
				let param = {
					endDate: this.endDate,
					orgUuid: this.orgParam.orgUuid,
				};
				let fun = this.tabCurrent == 0 ? reportService.licByOrgUuid : reportService.licByBizFormat;
				if (this.tabCurrent == 1 && !this.$u.test.isEmpty(this.itemKeyUuid)) {
					param.orgUuid = this.itemKeyUuid;
					this.regs = this.itemKeyName;
				} else {
					this.regs = this.orgParam.orgName;
				}
				fun(param).then(res => {
					this.$modal.hideLoading();
					if (res.success) {
						this.orginalData.content = this.$u.deepClone(res.data);
					} else {
						this.$u.toast(res.msg);
					}
				}).catch(e => {
					this.$modal.hideLoading();
					console.log(e);
					this.$u.toast('查询失败');
				})
			},
			tabChange(e) {
				console.log('e====' + e);
				this.tabCurrent = e;
				this.keyCode = this.tabCurrent == 0 ? "orgUuid" : "";
				this.orginalData.header = this.tabList[this.tabCurrent].header;
				this.orginalData.content = [];
				this.loadData();
			},
			dbClick(obj) {
				if (this.tabCurrent != 0) return;
				if (obj.orgLevel == '03') return; // 表示已经是区县级别，不用再下钻
				this.orgParam.orgUuid = obj.orgUuid;
				this.orgParam.orgName = obj.orgShortName;
				this.itemKeyUuid = "";
				this.itemKeyName = "";
				this.loadData();
			},
			clickItem(itm, key) {
				if (this.tabCurrent != 0) return;
				this.itemKeyUuid = itm.orgUuid;
				this.itemKeyName = itm.orgShortName;
			},
			refreshTb() {
				// 刷新操作，刷新暂不重置筛选条件
				this.itemKeyUuid = "";
				// this.endDate = this.$u.timeFormat(Date.now(), "yyyy-mm-dd");  刷新不需要重置搜索条件
				this.orgParam.orgUuid = this.user.user.org.orgUuid;
				this.orgParam.orgName = this.orgParam.areaName;
				this.loadData();
			},
			timeChoice() {
				this.showTime = true;
			},
			searchTap(e) {
				if (e.isReset) {
					this.refreshTb();
				} else {
					this.endDate = e.time;
					this.showSearch = false;
					this.loadData();
				}
			},
			timeChange(e) {
				this.showTime = false;
				if (this.showSearch) {
					this.endDate = e.result;
				}
			},
			fabtrigger(act) {
				if (act.index === 0) {
					this.refreshTb();
				} else if (act.index === 1) {
					this.showSearch = true;
					// this.selectCondit()
				}
			},
		},
	}
</script>
<style scoped lang="scss">
	.page {
		padding: 0;
	}

	.nav-right-icon {
		margin-right: 30rpx;
		font-size: .8rem;
		color: #FFF;
	}

	.regie {
		height: 88rpx;
		padding: 0 $cm-content-paddng-row;
		font-size: 28rpx;
		display: inline-flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		width: 100%;
	}

	.regie_txt_normal {
		font-weight: 400;
		color: #989EA1;
	}

	.regie_txt {
		font-weight: 600;
		color: #0070D2;
	}

	.regie_txt_divider {
		font-size: 12rpx;
		margin-left: 12rpx;
		margin-right: 12rpx;
	}
</style>
